import React from 'react';
import { useNavigate } from 'react-router-dom'
import type { INewDataList } from '../NewsList/interface';
import MoreLink from '../NewsList/MoreLink';
import { Typography } from 'antd';
import './index.less';

interface IProps {
  title: string;
  data: INewDataList;
  moreLink?: string;
}

const ProductCardList: React.FC<IProps> = ({
  title,
  data,
  moreLink
}) => {
  const navigate = useNavigate();
  return (
    <div className='product-card-list'>
      <div className='product-title'>
        <div>
          <h1 style={{ fontSize: '24px' }}>{title}</h1>
        </div>
        {moreLink ? <a><MoreLink url={moreLink} /></a> : null}
      </div>
      <div className='product-list'>
        {
          data && data.map(item => {
            return (
              <div key={item.id} onClick={() => {
                navigate(`/products/detail/${item.id}`)
              }}
                className='product-item'
              >
                <div className='product-image-container'>
                  <img src={item.imgUrl} style={{ width: '100%' }} ></img>
                </div>
                <div className='product-content-container'>
                  <div><Typography.Text style={{ fontSize: '16px', fontWeight: 'bold' }}>{item.title}</Typography.Text></div>
                  <div><Typography.Text style={{ fontSize: '14px', lineHeight: '24px', overflow: 'hidden' }}>{item.content}</Typography.Text></div>
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default ProductCardList;